<template>
  <div class="home">
      
      <van-nav-bar title="东京商城" left-text="返回" left-arrow>
        <van-icon name="search" slot="right" />
      </van-nav-bar>

    <van-notice-bar
      text="全场1折，全场1折，全场1折，全场1折，全场1折，全场1折，全场1折，全场1折，。"
      left-icon="volume-o"
    />
    
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <div style="padding-bottom:50px" class="listData"> 
      <div  v-for="list in lists">
    
      <van-card
        tag="新品"
        :price="list.price"
        :desc="list.text"  
        :title="list.name"
        :thumb="list.img[0]"
        thumb-link='http://10.31.162.85:8081/Goodsaction#/Goodsaction'
        @click="goods(list)" 
      >
    
    
      <div slot="footer">
        <van-button size="mini" type="warning" round hairline  @click="addcart(list)">加入购物车</van-button>
        <van-button size="mini" type="danger" round hairline to='/Goodsaction' @click="goods(list)" >立即购买</van-button>
    </div>
   </van-card>
   </div>
   <van-tabbar>
      <van-tabbar-item icon="home-o"> <router-link to="/">首页</router-link></van-tabbar-item>
      <van-tabbar-item icon="comment-o" > <router-link to="/About">新闻</router-link></van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" :info='infoadd'><router-link to="/Cart">购物车</router-link></van-tabbar-item>
      <van-tabbar-item icon="friends-o" > <router-link to="/My">我的</router-link></van-tabbar-item>
      </van-tabbar>
   </div>
   

  <!-- <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o"> <router-link to="/">首页</router-link></van-tabbar-item>
  <van-tabbar-item icon="comment-o" > <router-link to="/About">新闻</router-link></van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" ><router-link to="/Cart">购物车</router-link></van-tabbar-item>
  <van-tabbar-item icon="friends-o" > <router-link to="/My">我的</router-link></van-tabbar-item>
  </van-tabbar> -->


  </div>
</template>

<script>
// @ is an alias to /src
import { NavBar } from 'vant';
import axios from 'axios'
import {mapActions} from 'vuex';
import {mapGetters} from 'vuex'
export default {
     methods: {
        ...mapActions([
            'addcart'
        ]),
         ...mapActions([
            'goods'
        ]),
    },
   data() {
    return {
        lists:[],
      
      images: [
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=520997945,75746378&fm=26&gp=0.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554995062286&di=4109f481294f6800c5fc2f3f8fa37b75&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a61458cf688ca801219c77efff99.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554995020844&di=ca3ad1255850be78609456baf3a4db21&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F17%2F56%2F27%2F12S58PIC89m_1024.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554995020844&di=6ac2b151681fdd871e5dee6d8694a915&imgtype=0&src=http%3A%2F%2Fp1.so.qhmsg.com%2Ft017e2d1caab784bd46.jpg'
      ],
      imageURL:'https://img.alicdn.com/imgextra/i3/1714128138/O1CN011qY4q429zFgk1Afg8_!!1714128138.jpg_430x430q90.jpg',
       active: 0,
      
    }
    
  },
    created(){
     this.axios({
      url:'http://localhost:3000/carousel',
      method:'get'
    }).then(res=>{
      this.lists=res.data
       //console.log( this.lists)
    })
  },
  computed:{
    ...mapGetters([
      'shoplist'
    ]),

    infoadd(){
      var length=0;
      length=this.shoplist.length
      return length
    }
  }
  }
  

</script>
<style scoped>
   img{
     width:360px;
     height:150px
   }
   .van-card__header {
      display: flex;
      flex-direction: column;
  }
  .van-card{
      width:50%;
      
  }
  .van-card__content{
    height:70px;
    margin-top:60px
  }
  .van-card__thumb img{
    max-width:165%;
    max-height:180%;
  }
  .van-card__title{
    height:30px
  }
  .van-card{
    float: left;
  }
  .listData:after{
      content:'';
      height:0;
      line-height:0;
      display:block;
      visibility:hidden;
      clear:both;
      overflow: hidden
　}

</style>